<template>
	<view class="sheet">
		<view class="sheet-item" v-for="(item, index) in sheetList" :key="index" @click="sheetInfo(item.id)">
			<image :src="item.coverImgUrl" mode="" class="img" lazy-load="ture"></image>
			<view class="sheet-name">
				{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sheetList: []
			}
		},
		methods: {
			getsheet(){
				uni.request({
					url:`http://134.175.83.178:3000/top/playlist?limit=30&order=new`,
					method:'GET',
					success: (res) => {
						// console.log(res)
						const { data } = res
						this.sheetList = data.playlists
					}
				})
			},
			sheetInfo(id){
				uni.navigateTo({
					url:`/pages/sheetInfo/sheetInfo?id=${id}`
				})
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:"精选歌单"
			})
			this.getsheet()
		}
	}
</script>

<style>
.sheet{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.sheet-item{
	width: 48%;
}
.img{
	width: 100%;
	height: 24vh;
}
.sheet-name{
	font-size: 28rpx;
}

</style>
